<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container"></div>
  <script type="text/haha" id="LZW">
    <ul>
      {{ #arr }}
      <li>
        <div class="hd">{{ name }}的信息</div>
        <div class="bd">
          <p>姓名：{{ name }}</p>
          <p>年龄：{{ age }}</p>
          <p>性别：{{ sex }}</p>
          <p>
            {{ #fruits }}
            <span> {{ . }} </span>
            {{ /fruits }}  
          </p>
        </div>
      </li>
      {{ /arr }}
      <p>{{ desc }}</P>
    </ul>
  </script>
  <script src="./lib/myEngine.js"></script>
  <script>
    const arr = [
      { name: 'jk', age: 23, sex: 'female', fruits: [ 'apple', 'orange' ] },
      { name: 'jk2', age: 24, sex: 'male', fruits: [ 'pear', 'watermelon' ] },
      { name: 'jk3', age: 23, sex: 'female', fruits: [ 'banana' ] }
    ]
    const desc = 'wondeful world!'
    const data = {
      arr, desc
    }

    const str = document.getElementById('LZW').innerText;
    
    const domstr = window.$render(str, data);

    document.getElementById('container').innerHTML = domstr;

  </script>
</body>
</html>